<template>
    <div id="xclAlert" class="xcl_alert" v-show="show">
        <div class="xcl_alert_inner" id="xcl_alert_inner">
            <header>
                <h2>{{alertTitle || '标题'}}</h2>
                <div class="close" @click="cancleFn"><span class="icon icon-icclose"></span></div>
            </header>
            <div class="con" >{{showContent}}</div>
             <p class="buttons-row">
                <a href="javascript:;" @click="confirmFn" class="button active">确定</a>
             </p>
        </div>
    </div>
</template>
<script>
    export default {
        replace: true,
        props: ['showContent','show','confirmFn','cancleFn','alertTitle'],
        methods:{
        }
    }
</script>
<style lang="stylus">
.xcl_alert {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    .xcl_alert_inner {
        display: block;
        margin: 0 .8rem;
        background-color: rgba(255,255, 255,1);
        color: #333;
        border-radius: 3px;
        line-height: 27px;
        vertical-align: middle;
        margin-top: 50%;
        overflow:hidden;
        header{
            position:relative;
            h2{
                color:#E76364;font-size:1em;margin:.6em 0;text-align:left;border-bottom:1px solid #dadada;padding-bottom:.6em;font-weight:normal;padding-left:1em;
            }
            .close{
                position:absolute;right:.6em;top:0;font-size:1.2em;color:#999;cursor:pointer;
            }
        }
        .con{
            padding:.2em .6em;text-align:left;padding-left:1em;
        }
        .buttons-row{
             padding:0 1em;
             .button:last-child{border-radius: .25em;}
        }
    }
}
</style>